// 公共样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  border: none;
}

html,
page {
  height: 100%;
}

body {
  background-color: $bgColor;
  color: $black;
  height: 100%;
  font-size: 28rpx;
  width: 100%;
}

a {
  color: $black;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

a:focus,
a:active {
  outline: none;
}

.b {
  font-weight: bold;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.tj {
  text-align: justify;
}

.hide {
  display: none !important;
}
.over-hide {
  overflow: hidden;
}
.hidden {
  visibility: hidden;
}
.mainColor {
  color: $mainColor;
}
.fc8 {
  color: #888;
}
.fc9 {
  color: #999;
}
.fc6 {
  color: #666;
}
.fc3 {
  color: #333;
}
.fl {
  float: left;
}

.fr {
  float: right;
}

.tl {
  text-align: left;
}

.cf::before,
.cf::after {
  content: '';
  display: table;
}

.cf::after,
.cl {
  clear: both;
}

.cf {
  zoom: 1;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex,
.box-flex {
  display: flex;
}

.flex-b {
  display: flex;
  justify-content: space-between;
}

.flex-m,
.df-center {
  display: flex;
  align-items: center;
}

.flex-c {
  display: flex;
  justify-content: center;
}

.flex-r {
  display: flex;
  flex-direction: row-reverse;
}

.flex-w {
  display: flex;
  flex-wrap: wrap;
}

.flex-right {
  margin-left: auto;
}

.flex-c-m {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-a-m {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-b-m {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-s-m {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-bottom {
  align-items: baseline;
}
.flex-1 {
  flex: 1;
}
.w100 {
  width: 100%;
}
.w100p {
  width: 100%;
}
.mid {
  vertical-align: middle;
}

.center {
  margin: 0 auto;
}

.zm-page__content {
  min-height: 100vh;
  background: #fff;
  padding: 40rpx 27rpx 30rpx 27rpx;
  box-sizing: border-box;
}

.zm-point {
  width: 12rpx;
  height: 12rpx;
  background: $mainColor;
  border-radius: 50%;
}
.position-main {
  position: relative;
}
.zm-title {
  color: #333;
  font-size: 36rpx;
  padding-left: 28rpx;
  position: relative;
  box-sizing: border-box;

  &::before {
    content: '';
    left: 0;
    height: 32rpx;
    width: 8rpx;
    display: block;
    background: $mainColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.zm-line {
  width: 100%;
  height: 1px;
  background: #f2f2f2;
}
.onShow {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}

.moreShow {
  word-break: break-all;
  word-wrap: break-word;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.custom-shade {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
}
@for $i from 1 through 5 {
  .flex-#{$i} {
    flex: $i !important;
    overflow: hidden;
  }
}

@for $i from 5 through 30 {
  .fs#{$i * 2} {
    font-size: $i * 2rpx !important;
  }
}

@for $i from 0 through 40 {
  .mr#{$i * 5} {
    margin-right: $i * 5rpx !important;
  }

  .ml#{$i * 5} {
    margin-left: $i * 5rpx !important;
  }

  .mt#{$i * 5} {
    margin-top: $i * 5rpx !important;
  }

  .mb#{$i * 5} {
    margin-bottom: $i * 5rpx !important;
  }

  .mg#{$i * 5} {
    margin: $i * 5rpx !important;
  }

  .mlr#{$i*5} {
    margin-left: $i * 5rpx !important;
    margin-right: $i * 5rpx !important;
  }

  .mtb#{$i*5} {
    margin-top: $i * 5rpx !important;
    margin-bottom: $i * 5rpx !important;
  }

  .pr#{$i * 5} {
    padding-right: $i * 5rpx !important;
  }

  .plr#{$i*5} {
    padding-left: $i * 5rpx !important;
    padding-right: $i * 5rpx !important;
  }

  .ptb#{$i*5} {
    padding-top: $i * 5rpx !important;
    padding-bottom: $i * 5rpx !important;
  }

  .pl#{$i * 5} {
    padding-left: $i * 5rpx !important;
  }

  .pt#{$i * 5} {
    padding-top: $i * 5rpx !important;
  }

  .pb#{$i * 5} {
    padding-bottom: $i * 5rpx !important;
  }

  .pd#{$i*5} {
    padding: $i * 5rpx !important;
  }
}

@for $i from 1 through 30 {
  .w#{$i * 10} {
    width: $i * 10rpx;
  }
  .h#{$i * 10} {
    height: $i * 10rpx;
  }

  @if $i<21 {
    .w#{$i * 5}p {
      width: $i * 5%;
    }
  }
}

@for $i from 1 through 8 {
  .w#{$i * 100} {
    width: $i * 100rpx;
  }
}

.round {
  border-radius: 50%;
  overflow: hidden;
}

.h100p {
  height: 100%;
}

.m100vp {
  min-height: 100vh;
}

.bgfff {
  background: #fff;
}

.red {
  color: $red !important;
}

.green {
  color: $green !important;
}

.blue,
.text-primary {
  color: $blue !important;
}

.yellow {
  color: $yellow !important;
}

.black {
  color: $black !important;
}

.gray {
  color: $gray !important;
}

.anterior {
  color: $anterior !important;
}

.orange {
  color: $org !important;
}

.text-orange {
  color: #ff9400;
}

.c-disabled {
  color: #c0c4cc;
}
.p-sticky {
  position: sticky;
}
.p-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ellipsis,
.one-show {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.more-show {
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  line-clamp: 2;
  box-orient: vertical;
}

.del {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.overflow-auto {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-hide {
  overflow: hidden;
}

.fw-5 {
  font-weight: 500;
}

.db {
  display: block;
}

.di {
  display: inline;
}
.dib {
  display: inline-block;
}
.vt {
  vertical-align: top;
}

.vm {
  vertical-align: middle;
}

.vb {
  vertical-align: bottom;
}

.ba {
  border: 1rpx solid $dividing;
}

.bt {
  border-top: 1rpx solid $dividing;
}

.bb {
  border-bottom: 1rpx solid $dividing;
}

.br {
  border-right: 1rpx solid $dividing;
}

.bl {
  border-left: 1rpx solid $dividing;
}

.wb {
  word-break: break-all;
  white-space: break-spaces;
}

.b0 {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}

.bor-box {
  border: 1rpx solid $dividing;
  padding: 10rpx;
  border-radius: 5rpx;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none !important;
}

input[type='number'] {
  appearance: textfield;
}
.fb {
  font-weight: bold;
}
.ell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ell2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
// Text Row
@for $i from 1 through 6 {
  .text-row-#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $i;
  }
}
.flex-col-center {
  align-items: center;
}

.flex-col-top {
  align-items: flex-start;
}

.flex-col-bottom {
  align-items: flex-end;
}

.flex-row-center {
  justify-content: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-space-between {
  justify-content: space-between;
}

.flex-space-around {
  justify-content: space-around;
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}
.nowrap {
  white-space: nowrap;
}

@for $i from 1 through 9 {
  .w#{$i} {
    width: $i * 10%;
  }
}

@for $i from 10 through 30 {
  .br#{$i} {
    border-radius: $i * 1rpx;
  }
}

.line-1 {
  line-height: 1;
}
.line-0 {
  line-height: 0;
}
